<template>
    <div class="toolbar-warp">
        <div v-if="showSort" class="sort-by">
            <div class="select-container">
                <select @change="selectVal($event)">
                    <option value="" disabled="" selected="">Sort By</option>
                    <option v-for="opt in options" :value="opt.value" :selected="(defaultSort==opt.value)" :key="opt.text" v-text="opt.text"></option>
                </select>
                <span class="icon-menu-dowm"></span>
            </div>
        </div>
        <div class="toolbar clearfix">
            <span class="results">Results:
                <span class="total">19</span>
            </span>
            <a class="page-btn prev icon-arrow-left disabled" href="javascript:;"></a>
            <div class="numbering">
                <ul class="list-unstyled">
                    <li class="current">
                        <span>1</span>
                    </li>
                    <li>
                        <router-link :to="{query:{nav:this.$route.query.nav,sort:this.$route.query.sort,page:2}}">2</router-link>
                    </li>
                </ul>
            </div>
            <a class="page-btn next icon-arrow-right" href="javascript:;"></a>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        showSort: {
            type: Boolean,
            default: true
        },
        options: Array,
        defaultSort: String
    },
    methods: {
        selectVal(event) {
            var queryDataUrl = this.$route.params.CateName
            this.$router.push({
                path: '/list/' + queryDataUrl,
                query: {
                    nav: this.$route.query.nav,
                    sort: event.target.value,
                    page: this.$route.query.page
                }
            })
            this.$parent.defaultSort = event.target.value
        }
    }
}
</script>
<style scoped>
.toolbar {
    text-align: right;
    padding: 20px 0;
}

.toolbar .page-btn {
    font-weight: bold;
}

.bottom-toolbar a {
    color: #000;
}

.numbering,
.numbering ul li {
    display: inline-block;
}

.numbering ul>li+li:before {
    content: '/';
    margin: 0 6px;
}

.numbering ul>li.current span {
    font-weight: bold;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .sort-by a {
        display: none;
    }
    .toolbar {
        text-align: center;
    }
    .toolbar .results {
        display: none
    }
    .toolbar a.page-btn {
        display: inline-block;
        width: 43px;
        height: 40px;
        line-height: 40px;
        color: #c9c9c9;
        border: 1px #C9C9C9 solid;
    }
    .toolbar a.disabled {
        color: #EFEFEF;
        border-color: #EFEFEF;
    }
    .toolbar a.prev {
        float: left;
    }
    .toolbar a.next {
        float: right;
    }
    .numbering ul {
        padding-top: 10px;
    }
}

@media (min-width: 768px) {
    .sort-by {
        float: left;
        position: relative;
        margin-top: 10px;
        width: 200px;
    }
    .sort-by a {
        position: absolute;
        right: -20px;
        top: 12px;
    }
    .toolbar {
        float: right;
    }
    .toolbar span.results,
    .toolbar a.prev {
        margin-right: 20px;
    }
    .toolbar a.next {
        margin-left: 20px;
    }
}
</style>
